<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :before-close="closeUserDialog"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="60px">
      <el-form-item prop="userName" label="账号">
        <el-input
          placeholder="请输入账号"
          maxlength="36"
          size="medium"
          v-model="form.userName"
        ></el-input>
      </el-form-item>

      <el-form-item prop="password" :required="!form.id" label="密码">
        <el-input
          placeholder="请输入新密码 (为空表示使用旧密码)"
          maxlength="12"
          size="medium"
          v-model="form.password"
        ></el-input>
      </el-form-item>
      <el-form-item required prop="avatar" label="头像">
        <el-upload
          ref="upload"
          list-type="picture-card"
          :show-file-list="false"
          :action="uploadUrl"
          class="avatar-uploader"
          :http-request="(e) => fileUploadHandle(e, 'avatar', 'userAvatar')"
          accept="image/*"
        >
          <img v-if="form.avatar" :src="form.avatar" class="upload-img" />
          <i v-if="!form.avatar" class="el-icon-plus img-uploader-icon"></i>
          <i
            v-else
            @click.stop="fileRemoveHandle('avatar', 'userAvatar')"
            class="el-icon-delete img-uploader-icon"
          ></i>
        </el-upload>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input
          placeholder="请输入备注"
          maxlength="60"
          size="medium"
          v-model="form.remark"
        ></el-input>
      </el-form-item>

      <div class="dialog-btns">
        <el-button @click="closeUserDialog" size="medium">取消</el-button>
        <el-button @click="editHandle" size="medium" type="primary">{{
          form.id ? "编辑" : "新增"
        }}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
  
<script>
import { addUser, updateUser } from "@/api/sys/user";
import { fileRemove, fileUpload, uploadUrl } from "@/utils/tools";
export default {
  name: "UserEdit",
  props: {
    formData: {
      type: Object,
    },
    title: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uploadUrl,
      form: {
        userName: "",
        password: "",
        avatar: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号(长度在 2 到 36 个字符)",
            trigger: "blur",
          },
          {
            min: 2,
            max: 36,
            message: "长度在 3 到 36 个字符",
            trigger: "change",
          },
        ],
        password: [
          {
            required: false,
            message: "请输入密码(长度在 6 到 12 个字符)",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "change",
          },
        ],
        avatar: [
          {
            required: true,
            message: "请选择头像",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.form = JSON.parse(JSON.stringify(this.formData));
  },
  methods: {
    async fileUploadHandle(e, type, belongTo) {
      let img = await fileUpload(this, e, belongTo);
      this.$set(this.form, type, img);
    },
    async fileRemoveHandle(type, belongTo) {
      await fileRemove(this, this.form[type], belongTo, (e) => {
        this.form[type] = "";
      });
    },
    editHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { form } = this;
          if (!form.id) {
            addUser(form).then((res) => {
              this.closeUserDialog("refresh");
            });
          } else {
            updateUser(form).then((res) => {
              this.closeUserDialog("refresh");
            });
          }
        }
      });
    },
    deleteFile(type) {
      this[type + "File"] = "";
      if (type == "avatar") {
        this.$set(this.form, "avatar", "");
      } else {
        this.$set(this.form, `${type}File`, "");
      }
    },
    closeUserDialog(type) {
      this.$forceUpdate();
      if (type === "refresh") {
        setTimeout(() => {
          this.form = {};
          this.$emit("closeDialog", "userVisible", type === "refresh");
        }, 1000);
      } else {
        this.form = {};
        this.$emit("closeDialog", "userVisible", type === "refresh");
      }
    },
  },
  computed: {
    dialogTitle() {
      return (this.form.id ? "编辑" : "新增") + "用户";
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
  img {
    width: 100%;
    height: 100%;
  }
  .img-uploader-icon {
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    position: absolute;
    left: 0;
  }
}

.item-row {
  display: flex;
  align-items: flex-end;
  .el-icon-download {
    font-size: 30px;
    margin-left: 30px;
  }
}
.pay-title {
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}
.dialog-btns {
  display: flex;
  justify-content: center;
}
</style>